<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试管理</title>
    <script src="../js/jquery.min.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>考试管理</legend>
    </fieldset>
    <div style="margin:10px 10px">
        <div>
            <button type="button" class="layui-btn">创建考试</button>
            <button type="button" class="layui-btn">管理考试</button>
        </div>

        <div style="margin-top: 20px;">
            <form class="layui-form layui-form-pane" method="POST" action="">
                <!-- <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入考试名"
                class="layui-input" style="width: 200px;display: inline-block;margin-right: 20px;margin-left: 20px;"> -->
                <div class="layui-inline" style="margin-right: 20px;">
                    <div class="layui-input-inline">
                        <select name="course" lay-filter="course">
                            <option value="">请选择考试类别</option>
                            <option value="0">java</option>
                            <option value="1">C++</option>
                            <option value="2">phyth</option>
                        </select>
                    </div>
                </div>
                <input type="text" class="layui-input" id="beginTime" placeholder="开始时间"
                    style="width: 200px;display: inline-block;margin-right: 20px;margin-left: 20px;">
                <input type="text" class="layui-input" id="endTime" placeholder="结束时间"
                    style="width: 200px;display: inline-block;margin-right: 20px;margin-left: 20px;">
                <button type="button" class="layui-btn">搜索</button>
            </form>
        </div>
        <!-- 表单 -->
        <hr>
        <!-- 表格 -->
        <table class="layui-table">
            <thead>
                <tr>
                    <!-- <th>考试记录id</th> -->
                    <th style="width: 200px;text-align: center;">考试名称</th>
                    <th>所属类别</th>
                    <th>考试人次</th>
                    <th>考试分数</th>
                    <th>考试时长</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>操作（删除、修改、查看试卷内容）</th>
                </tr>
            </thead>
            <tbody id="demoList">
                <tr>
                    <td style="width: 200px;text-align: center;">aaaaa考试</td>
                    <td>java</td>
                    <td>30人</td>
                    <td>100分</td>
                    <td>120分钟</td>
                    <td>2020-05-23</td>
                    <td>2020-05-30</td>
                    <td>
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-sm">考试记录</button>
                            <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i>修改</button>
                            <button type="button" class="layui-btn layui-btn-sm">预览试卷</button>
                            <button type="button" class="layui-btn layui-btn-sm">统计分析</button>
                            <button type="button" class="layui-btn layui-btn-sm">删除考试</button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="page1"></div>
    </div>
</body>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['element', 'form', 'layedit', 'laydate', 'laypage', 'layer'], function () {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;
        var laypage = layui.laypage,
            layer = layui.layer;
        laypage.render({
            elem: 'page1',
            count: 100 //数据总数
                ,
            jump: function (obj) {
                console.log(obj)
            }
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#beginTime' //指定元素
        });
        laydate.render({
            elem: '#endTime' //指定元素
        });
    })
</script>

</html>